/**
 * 空间成员列表首页
 */
import React from 'react';
import styles from './index.less';
import { connect, connectMaster, history } from 'umi';
import { Button, Space, Table } from 'antd';
import moment from 'moment';
import AddMenber from './AddMenber'
import { getMasterCommonPkg } from '@/utils/masterData';
const {
  utils: {
    otherUtil: { authorityVerify },
  },
} = getMasterCommonPkg();

@connectMaster //接收主服务数据
@connect(({ memberList, select }) => ({
  memberList,
  userLIstMap: select.userLIstMap,
}))
export default class extends React.Component {
  componentDidMount = async () => {
    this.getMemberList();
    this.init();
    this.getUserList()
    // this.getAllRoleList();
  };
  state = {};
  //更新状态
  changeState = obj => {
    this.props.dispatch({
      type: 'memberList/setState',
      payload: obj,
    });
  };

  

  // 获取所有空间成员
  getMemberList = async () => {
    var rs = await this.props.dispatch({
      type: 'memberList/getMemberList',
    });
    console.log(rs, "空间成员列表");
    if (rs.success) {
      this.changeState({
        tabList: rs.data,
      });
    }
  };

  // 查看对应详情
  getMemberListDetail = async id => {
    let rs = await this.props.dispatch({
      type: 'memberList/getMemberListDetail',
      payload: { id: id },
    });
    // console.log(rs,"空间成员详情")
    if (rs.success) {
      this.changeState({
        detailList: rs.data,
      });
    }
  };

  // 获取用户列表
  getUserList = async ()=>{
    let rs = await this.props.dispatch({
      type: 'select/getUserList',
      payload: { pageSize: 10000000, pageNum: 1 },
    });
    if(rs.success){
      this.changeState({
        allMember:rs.data.dataList
      })
    }
  }
  init = async () => {
    // 获取用户列表
    
  };

  // 返回table列表
  renderTableData = (item, i) => {
    const { userLIstMap } = this.props;
    return {
      key: i,
      1: item.name,
      // 2: this.createdPeople(item.createId),
      2: userLIstMap[item.createId]?.name,
      3: item.memberCounts,
      4: moment(item.createTime).format('YYYY-MM-DD HH:mm:ss'),
      options: (
        <div>
          <Space size="middle">
            <a
              key={'view'}
              onClick={() => {
                this.changeState({
                  operationType: 'view',
                });
                //点击查看空间详情
                if (item.id) {
                  this.getMemberListDetail(item.id);
                }
                history.push({
                  pathname: '/userManagement/memberList/member',
                  query: {
                    ...this.props.location.query,
                    type: 'view',
                    detailId: item.id,
                  },
                });
              }}
            >
              查看
            </a>
            <a
              key={'edit'}
              onClick={() => {
                if (!authorityVerify('UPDATE_SPACE_MEMBER')) return;
                this.changeState({
                  operationType: 'edit',
                });
                // 点击查看空间详情
                if (item.id) {
                  this.getMemberListDetail(item.id);
                }
                history.push({
                  pathname: '/userManagement/memberList/member',
                  query: {
                    ...this.props.location.query,
                    type: 'edit',
                    detailId: item.id,
                  },
                });
              }}
            >
              编辑
            </a>
            <a
              onClick={()=>{
                this.changeState({
                    addVisible:true,
                    workSpaceId:item.id
                })
              }}
            >
              添加成员
            </a>
          </Space>
        </div>
      ),
    };
  };

  render() {
    const columns = [
      { title: '所属空间',width:"15%", dataIndex: '1' },
      { title: '负责人', width:"15%",dataIndex: '2' },
      { title: '成员数', width:"15%",dataIndex: '3' },
      { title: '创建时间',width:"20%", dataIndex: '4' },
      { title: '操作',width:"15%", dataIndex: 'options', fixed: 'right' },
    ];
    const { tabList } = this.props.memberList;
    return (
      <div>
        <p className={styles.Title}>空间成员列表</p>
        <div className={styles.TableContain}>
          <div className={styles.TableList}>
            <Table
              columns={columns}
              dataSource={tabList.map((item, i) =>
                this.renderTableData(item, i),
              )}
              pagination={false}
              // scroll={{ y: '180px' }}
              onChange={(pagination, filters, sorter) => {
                this.getList({
                  pageNum: pagination.current,
                  pageSize: pagination.pageSize,
                });
              }}
            />
          </div>
        </div>
        {/* 弹窗 */}
        <AddMenber parentThis={this}/>
      </div>
    );
  }
}
